<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>图片转化成Base64</title>
</head>
<body>
<!--<img id="img" src="imge/mm.jpg">-->
<!--<button id="btn">base64</button>-->

<input type="file" id="imgInput">
<hr/>
<input type="button" value="上传" onclick="upload()"/>
<hr/>
<img id="img" src="">

</body>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/cropper.js"></script><!-- 需要引入cropper.js 支持转化-->
<script type="text/javascript">
    var base64Phone = "";
    $(function () {
        //将上传的图片文件转化成base64
        $("#imgInput").change(function () {
            if (typeof (FileReader) === 'undefined') {
                console.log("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");
                return;
            }
            var file = this.files[0];//获取文件对象
            console.log(file.type);//输出文件类型
            if (!/image/.test(file.type)) {
                return;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);//读取图片文件
            reader.onload = function () {
                console.log(this.result);
                base64Phone = this.result;
            }
        });
    });

    function upload() {
        console.log(base64Phone);
        $.ajax({
            url: "/base64Upload",
            type: "POST",
            data: {
                'base64Phone': base64Phone
            },
            success:
                function (obj) {
                    $('#none').html(obj);
                },
            error:
                function () {
                    alert("系统异常");
                }
        });
    }

    //将现有的图片转化成base64
    // $("#btn").click(function () {
    //     var imageSrc = $("#img").attr("src");
    //     var image = new Image();
    //     image.src = imageSrc;           //将地址对应图片转化成图片对象
    //     image.onload = function () {
    //         var ext = imageSrc.substring(imageSrc.lastIndexOf(".") + 1);  //获取扩展名
    //         var base64 = getBase64Image(image, ext);
    //         console.log(base64);
    //     }
    // });

    //将图片转化成base64图片（压缩图片）
    // function getBase64Image(image, ext) { //可封装公用方法
    //     var quality = 0.7;   //比率（压缩比）
    //     var canvas = document.createElement("canvas");
    //     canvas.width = image.width;
    //     canvas.height = image.height;
    //     var context = canvas.getContext("2d");
    //     context.clearRect(0, 0, canvas.width, canvas.height);
    //     context.drawImage(image, 0, 0, image.width, image.height);
    //
    //     // 这里是不支持跨域的
    //     var base64 = canvas.toDataURL("image/" + ext, quality);      //需要文件扩展名
    //     return base64;
    //
    // }
    //
    // // 将base64图片转化成Blob【该方法未测试】
    // function convertBase64UrlToBlob(urlData) {
    //     var bytes = window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte
    //
    //     //处理异常,将ascii码小于0的转换为大于0
    //     var ab = new ArrayBuffer(bytes.length);
    //     var ia = new Uint8Array(ab);
    //     for (var i = 0; i < bytes.length; i++) {
    //         ia[i] = bytes.charCodeAt(i);
    //     }
    //     return new Blob([ab], {type: 'image/png'});
    // }
</script>
</html>